<script src="<?= image_url('/static/assets/global/scripts/echarts.min.js') ?>"></script>
<style>
    #detail_contain{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.60);
        z-index: 999;
    }
    #detail{
        top: 15%;
        left: 24%;
        height: 500px;
        width: 1000px;
    }
    .info-block h4{
        margin-top: 25px;
    }
    h4{
        margin-top: 40px;
    }
    .flex-contain{
        width: 96%;
        margin: 3vh 2vw;
        padding: 30px 50px;
        text-align: center;
        display: flex;
        justify-content: space-around;
        background: #f2f2f2;
    }
    .order-item{
        width: 28%;
        padding: 20px 40px;
        font-size: 16px;
        border-radius: 4px;
        color: white;
        font-weight: bold;
    }
    .item-num{
        margin-top: 15px;
    }
    .item-success{
        background-image: linear-gradient(to right, #12CAAD, #08AE8B);
    }
    .item-wait{
        background-image: linear-gradient(to right, #975cf6, #829bf6);
    }
    .item-total{
        background-image: linear-gradient(to right, #f0a51e, #c7655d);
    }

</style>
<div class="row">
    <div class="col-xs-12">
        <?= form_open('', Array('class' => 'form-inline', 'role' => 'form', 'id' => 'search-form')) ?>
        <div class="input-group input-large date-picker input-daterange" data-date=""
             data-date-format="yyyy-mm-dd">
            <input type="text" class="form-control" name="order_create_time_begin"
                   value="<?= filterValue('order_create_time_begin') ?>" placeholder="开始时间" autoComplete="off">
            <span class="input-group-addon">to </span>
            <input type="text" class="form-control" name="order_create_time_end"
                   value="<?= filterValue('order_create_time_end') ?>" placeholder="结束时间" autoComplete="off">
        </div>
        <button type="reset" class="btn default" id="reset">重置条件</button>
        <button type="button" class="btn green about_search" id="ajax-look">查看 <i class="fa fa-search"></i></button>
        <?= form_close() ?>
        <div class="col-md-12 flex-contain">
            <div class="order-item item-total">
                <div class="item-title">总订单量</div>
                <div class="item-num"><span id="total_num">0</span>单（￥<span id="total_amount">0</span>）</div>
            </div>
            <div class="order-item item-wait">
                <div class="item-title">待付款订单</div>
                <div class="item-num"><span id="wait_num">0</span>单（￥<span id="wait_amount">0</span>）</div>
            </div>
            <div class="order-item item-success">
                <div class="item-title">已支付订单</div>
                <div class="item-num"><span id="payed_num">0</span>单（￥<span id="payed_amount">0</span>）</div>
            </div>
        </div>
        <div class="col-md-12" id="echart" style="height:500px;margin-top: 20px"></div>
    </div>
</div>
<!-- loading层 -->
<style>
    .loading-x{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0000008a;
        z-index: 20050;
    }
    .x-contain{
        margin: 18%;
        text-align: center;
    }
</style>
<div class="loading-x">
    <div class="x-contain">
        <img src="/static/assets/20160618173856_Ys5Td.gif" alt="">
    </div>
</div>
<script>
    function ajaxData(url, chartId, data, successCallback) {
        $(".loading-x").fadeIn();
        $.ajax({
            url: url,
            data: data,
            method: 'POST',
            dataType: 'json',
            success: function (res) {
                $(".loading-x").fadeOut();
                if (res.success) {
                    successCallback(res.data);
                } else {
                    console.log(res)
                }
            },
            fail: function (res) {
                console.log('error')
            }
        });
    }
    var myChart = echarts.init(document.getElementById('echart'),'dark');
    ajaxData('<?=site_url("/analyze/order_analyze/ajaxBlockData")?>', myChart, {}, function (res) {
        var dataAxis = res.line;
        var num = res.num;
        var ing_num = res.ing_num;
        var apply_num = res.apply_num;
        var wait_pay = res.wait_pay;
        var complete = res.complete;
        var amount = res.amount;
        var optionChart = {
            tooltip : {
                title:'点击',
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow' ,
                    label:{
                        show:false,
                        formatter: '{value}'
                    }
                }
            },
            title: {
                text: '总订单量（默认近一周）'
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: [
                {
                    type: 'value',
                    name: '总订单量',
                    min: 0,
                    max: Math.max(...num),
                    interval: Math.max(...num)/10,
                    axisLabel: {
                        formatter: '{value} 单'
                    }
                },
                {
                    type: 'value',
                    name: '订单金额',
                    min: 0,
                    max: Math.max(...amount) * 1.2,
                    interval: Math.max(...amount)/10 * 1.2,
                    axisLabel: {
                        formatter: '￥{value}'
                    }
                }
            ],
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    name: '订单总量',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: num
                },
                {
                    name: '租用中',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#b3f69b'},
                                    {offset: 0.5, color: '#43f03a'},
                                    {offset: 1, color: '#83f02c'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#b3f69b'},
                                    {offset: 0.7, color: '#43f03a'},
                                    {offset: 1, color: '#83f02c'}
                                ]
                            )
                        }
                    },
                    data: ing_num
                },
                {
                    name: '待确认还车',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#f6baa3'},
                                    {offset: 0.5, color: '#f03931'},
                                    {offset: 1, color: '#f05985'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#f6baa3'},
                                    {offset: 0.7, color: '#f03931'},
                                    {offset: 1, color: '#f05985'}
                                ]
                            )
                        }
                    },
                    data: apply_num
                },
                {
                    name: '待付款',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#829bf6'},
                                    {offset: 0.7, color: '#8c76f0'},
                                    {offset: 1, color: '#b038f0'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#829bf6'},
                                    {offset: 0.7, color: '#8c76f0'},
                                    {offset: 1, color: '#b038f0'}

                                ]
                            )
                        }
                    },
                    data: wait_pay
                },
                {
                    name: '已付款',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#def64c'},
                                    {offset: 0.7, color: '#f0a51e'},
                                    {offset: 1, color: '#f04e11'}

                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#def64c'},
                                    {offset: 0.7, color: '#f0a51e'},
                                    {offset: 1, color: '#f04e11'}

                                ]
                            )
                        }
                    },
                    data: complete
                },
                {
                    name: '付款金额',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#f1a42a'},
                                    {offset: 0.5, color: '#f1cb1e'},
                                    {offset: 1, color: '#f0f11d'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#bcada2'},
                                    {offset: 0.7, color: '#666d66'},
                                    {offset: 1, color: '#86857e'}
                                ]
                            )
                        }
                    },
                    data: amount
                }
            ]
        };
        $("#total_num").html(res.other.total_num);
        $("#total_amount").html(res.other.total_amount);
        $("#wait_num").html(res.other.wait_num);
        $("#wait_amount").html(res.other.wait_amount);
        $("#payed_num").html(res.other.payed_num);
        $("#payed_amount").html(res.other.payed_amount);
        myChart.setOption(optionChart);
    });

    //搜索
    $("#ajax-look").click(function () {
        var time_begin = $("input[name='order_create_time_begin']").val();
        var time_end = $("input[name='order_create_time_end']").val();
        var searchData = {
            'order_create_time_begin': time_begin,
            'order_create_time_end': time_end,
        };
        if (time_begin && time_end == '' ){
            console.log(time_begin)
            console.log(time_end)
            toastr.error('请选择结束时间！','未选择结束时间');
            return;
        }
        if (time_end && time_begin == '' ){
            console.log(time_begin)
            console.log(time_end)
            toastr.error('请选择开始时间！','未选择开始时间');
            return;
        }
        ajaxData('<?=site_url("/analyze/order_analyze/ajaxBlockData")?>', myChart, searchData, function (res) {
            var dataAxis = res.line;
            var num = res.num;
            var ing_num = res.ing_num;
            var apply_num = res.apply_num;
            var wait_pay = res.wait_pay;
            var complete = res.complete;
            var amount = res.amount;
            var optionChart = {
                tooltip : {
                    title:'点击',
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow' ,
                        label:{
                            show:false,
                            formatter: '{value}'
                        }
                    }
                },
                title: {
                    text: '总订单量（默认近一周）'
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '总订单量',
                        min: 0,
                        max: Math.max(...num),
                        interval: Math.max(...num)/10,
                        axisLabel: {
                            formatter: '{value} 单'
                        }
                    },
                    {
                        type: 'value',
                        name: '订单金额',
                        min: 0,
                        max: Math.max(...amount) * 1.2,
                        interval: Math.max(...amount)/10 * 1.2,
                        axisLabel: {
                            formatter: '￥{value}'
                        }
                    }
                ],
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    {
                        name: '订单总量',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#83bff6'}
                                    ]
                                )
                            }
                        },
                        data: num
                    },
                    {
                        name: '租用中',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#b3f69b'},
                                        {offset: 0.5, color: '#43f03a'},
                                        {offset: 1, color: '#83f02c'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#b3f69b'},
                                        {offset: 0.7, color: '#43f03a'},
                                        {offset: 1, color: '#83f02c'}
                                    ]
                                )
                            }
                        },
                        data: ing_num
                    },
                    {
                        name: '待确认还车',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#f6baa3'},
                                        {offset: 0.5, color: '#f03931'},
                                        {offset: 1, color: '#f05985'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#f6baa3'},
                                        {offset: 0.7, color: '#f03931'},
                                        {offset: 1, color: '#f05985'}
                                    ]
                                )
                            }
                        },
                        data: apply_num
                    },
                    {
                        name: '待付款',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#829bf6'},
                                        {offset: 0.7, color: '#8c76f0'},
                                        {offset: 1, color: '#b038f0'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#829bf6'},
                                        {offset: 0.7, color: '#8c76f0'},
                                        {offset: 1, color: '#b038f0'}

                                    ]
                                )
                            }
                        },
                        data: wait_pay
                    },
                    {
                        name: '已付款',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#def64c'},
                                        {offset: 0.7, color: '#f0a51e'},
                                        {offset: 1, color: '#f04e11'}

                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#def64c'},
                                        {offset: 0.7, color: '#f0a51e'},
                                        {offset: 1, color: '#f04e11'}

                                    ]
                                )
                            }
                        },
                        data: complete
                    },
                    {
                        name: '付款金额',
                        type: 'line',
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#f1a42a'},
                                        {offset: 0.5, color: '#f1cb1e'},
                                        {offset: 1, color: '#f0f11d'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#bcada2'},
                                        {offset: 0.7, color: '#666d66'},
                                        {offset: 1, color: '#86857e'}
                                    ]
                                )
                            }
                        },
                        data: amount
                    }
                ]
            };
            $("#total_num").html(res.other.total_num);
            $("#total_amount").html(res.other.total_amount);
            $("#wait_num").html(res.other.wait_num);
            $("#wait_amount").html(res.other.wait_amount);
            $("#payed_num").html(res.other.payed_num);
            $("#payed_amount").html(res.other.payed_amount);
            myChart.setOption(optionChart);
        });
    });
</script>
